<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div :class="collapsed ? 'logoNone' : 'logo'" :title="titleProbject">
        {{ titleProbject }}
      </div>

      <a-menu theme="dark" mode="inline">
        <template v-for="item in menuList">
          <a-menu-item :key="item.key" v-if="!item.children.length" @click="menuRouterTap(item)">
            <a-icon :type="item.icon" /> <span>{{ item.name }}</span>
          </a-menu-item>
          <a-sub-menu :key="item.key" v-else>
            <span slot="title"
              ><a-icon :type="item.icon" /><span>{{ item.name }}</span></span
            >
            <a-menu-item
              :key="itemChildren.key"
              v-for="itemChildren in item.children"
              @click="menuRouterTap(itemChildren)"
            >
              <a-icon :type="itemChildren.icon" /><span>{{ itemChildren.name }}</span></a-menu-item
            >
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="headers">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <div class="headersRight">
          <a-dropdown>
            <div class="headersRightName"><a-icon type="github" /> Hubinbin6</div>
            <a-menu slot="overlay">
              <a-menu-item @click="developMent"> <a-icon type="user" />个人中心 </a-menu-item>
              <a-menu-item @click="developMent"> <a-icon type="setting" />设置 </a-menu-item>
              <a-menu-divider />
              <a-menu-item @click="toLogin"> <a-icon type="poweroff" />退出登录 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 5px 0">
          <a-breadcrumb-item>{{ $route.meta.title }}</a-breadcrumb-item>
        </a-breadcrumb>
        <div :style="{ padding: '12px', background: '#fff', height: '95%' }">
          <router-view :key="$router.path"></router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  name: 'layoutHome',
  data() {
    return {
      //名称
      titleProbject: 'henrry_hu',
      //收缩展开标识
      collapsed: false,
      menuList: [
        { id: '1', pid: null, name: '首页', router: 'home', path: '/home', icon: 'home', sort: 1, children: [] },
        {
          id: '2',
          pid: null,
          name: '工具类',
          router: 'music',
          path: '/music',
          icon: 'appstore',
          sort: 2,
          children: [
            {
              id: '2-1',
              pid: '2',
              name: '音乐',
              router: 'music',
              path: '/music',
              icon: 'bars',
              sort: 1,
              children: [],
            },
            {
              id: '2-2',
              pid: '2',
              name: '占卜',
              router: 'divination',
              path: '/divination',
              icon: 'bars',
              sort: 2,
              children: [],
            },
            {
              id: '2-3',
              pid: '2',
              name: '干饭星球',
              router: 'diningPool',
              path: '/diningPool',
              icon: 'bars',
              sort: 3,
              children: [],
            },
            {
              id: '2-4',
              pid: '2',
              name: 'Iframe页面',
              router: 'iframes',
              path: '/iframes',
              icon: 'bars',
              sort: 4,
              children: [],
            },
            {
              id: '2-5',
              pid: '2',
              name: 'codemirror',
              router: 'codemirror',
              path: '/codemirror',
              icon: 'bars',
              sort: 5,
              children: [],
            },
            {
              id: '2-6',
              pid: '2',
              name: 'colorall',
              router: 'colorall',
              path: '/colorall',
              icon: 'bars',
              sort: 6,
              children: [],
            },
            {
              id: '2-7',
              pid: '2',
              name: 'divBox',
              router: 'divBox',
              path: '/divBox',
              icon: 'bars',
              sort: 7,
              children: [],
            },
            {
              id: '2-8',
              pid: '2',
              name: 'chunkupload',
              router: 'chunkupload',
              path: '/chunkupload',
              icon: 'bars',
              sort: 8,
              children: [],
            },
            {
              id: '2-9',
              pid: '2',
              name: 'videoFiv',
              router: 'videoFiv',
              path: '/videoFiv',
              icon: 'bars',
              sort: 8,
              children: [],
            },
          ],
        },
      ],
      routerItem: null,
    }
  },
  created() {
    this.load_init()
  },
  methods: {
    //初始化
    load_init() {
      this.routerItem = this.menuList[0]
    },
    //菜单跳转
    menuRouterTap(item) {
      this.routerItem = item
      this.$router.push(item.path)
    },
    //返回登录页
    toLogin() {
      this.$router.push('/login')
    },
    //提示
    developMent() {
      this.$message.success('正在加急开发中...')
    },
  },
}
</script>
<style lang="less" scoped>
#components-layout-demo-custom-trigger {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  .logo {
    font-weight: bold;
    font-size: 22px;
    height: 32px;
    color: #fff;
    margin: 16px;
    text-align: center;
  }
  .logoNone {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 32px;
    color: #fff;
    margin: 16px;
    text-align: center;
  }
  .headers {
    width: 100%;
    background: #fff;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .trigger {
      width: 90px;
      font-size: 18px;
      line-height: 64px;
      padding: 0 24px;
      cursor: pointer;
      transition: color 0.3s;
    }
    .headersRight {
      // width: 100px;
      padding-right: 20px;
      .headersRightName {
        font-size: 17px;
      }
    }
  }
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}
</style>
